<template>
  <div class="content-container">
    <el-timeline style="margin-top: 22px; margin-left: 15px">
      <el-timeline-item
        v-for="(item, index) in state.dataList"
        :key="index"
        :icon="item.status === '0' ? 'Loading' : 'SuccessFilled'"
        :color="item.status === '0' ? '#409EFF' : '#19be6b'"
        size="large"
        :timestamp="item.createTime"
      >
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: flex-start;
          "
        >
          <div>
            <el-tag v-if="item.status === '0'" type="primary" size="large"
              >{{ item.nodeName }}-{{ item.jobName }}-{{ item.statusDesc }}
            </el-tag>
            <el-tag v-else-if="item.status === '1'" type="success" size="large"
              >{{ item.nodeName }}-{{ item.jobName }}-{{ item.statusDesc }}
            </el-tag>
            <el-tag v-else type="warning" size="large"
              >{{ item.nodeName }}-{{ item.jobName }}-{{ item.statusDesc }}
            </el-tag>
            <span>-【{{ item.jobTypeDesc }}任务】</span>
            <span v-if="item.jobType === '0' && item.defUserId">
              -{{ item.defUserId ? "【审批用户】" + item.defUserName : "" }}
            </span>
            <span v-else-if="item.jobType === '1' && item.defRoleId">
              -{{ item.defRoleId ? "【审批角色】" + item.defRoleName : "" }}
            </span>
            <span v-else>
              <span v-if="item.userId">
                -{{ item.userId ? "【审批用户】" + item.userName : "" }}
              </span>
              <span v-else-if="item.roleId">
                -{{ item.roleId ? "【审批角色】" + item.roleName : "" }}
              </span>
            </span>
            <el-button
              v-if="(item.status === '0' || item.status === '9') && item.userId"
              text
              type="primary"
              icon="Bell"
              @click="remind(item.runJobId)"
            >
              催办任务
            </el-button>
            <span v-if="item.endTime">-【办理时间】{{ item.endTime }}</span>
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script setup lang="ts" name="FlowProgress">
import * as runJobApi from "@/api/flow/task/index";
import { queryTaskProgress } from "@/api/flow/taskquery/index";
import { useMessage } from "@/hooks/message";
const props = defineProps({
  flowInstId: {
    type: String,
    default: ""
  }
});

const state = reactive({
  dataList: []
});

const queryTableData = () => {
  queryTaskProgress(props.flowInstId).then(res => {
    state.dataList = res.data;
  });
};

function remind(runJobId: string) {
  runJobApi.remind({ id: runJobId }).then(() => {
    useMessage().success("催办任务成功");
  });
}

watchEffect(() => {
  if (props.flowInstId) {
    queryTableData();
  }
});
</script>
<style lang="scss">
.content-container {
  height: calc(100vh - 150px);
  overflow-y: auto;
}
</style>
